<template>
  <section>
    <el-row>
      <el-card>
        <el-col :span="24">
          <div>
            <el-row :gutter="4">
              <el-form :inline="true" label-width="70px">
                <el-form-item label="表名:">
                  <el-select v-model="searchDto.tableName" placeholder="请选择">
                    <el-option
                      v-for="item in tableList"
                      :key="item.tableName"
                      :label="item.tableComment"
                      :value="item.tableName"
                    >
                      <span
                        style="float: left;margin-right:10px;font-weight: bold"
                      >
                        {{ item.tableName }}
                      </span>
                      <span style="float: right;">{{ item.tableComment }}</span>
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    @click="getPageData"
                    >查询
                  </el-button>
                  <el-button type="primary" icon="el-icon-s-open" @click="clear"
                    >重置
                  </el-button>
                  <el-button
                    type="primary"
                    icon="el-icon-circle-plus"
                    @click="newSearch"
                    >新增实例查询信息
                  </el-button>
                </el-form-item>
              </el-form>
            </el-row>
          </div>
          <div class="table-content">
            <page-table
              ref="multipleSelection"
              :page-data="pageData"
              :loading="loading"
              :do-get-page-data="getPageData"
            >
              <el-table-column
                type="index"
                align="center"
                label="序号"
                width="100"
              ></el-table-column>
              <el-table-column
                prop="tableName"
                label="表名"
                align="center"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="fieldName"
                align="center"
                label="字段名"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="conditionName"
                label="查询项名称"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="conditionType"
                label="类型"
                align="center"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span>
                    {{ scope.row.conditionType | keyText("INSTANCE_SEARCH") }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                prop="conditionWildcard"
                label="通配符"
                align="center"
              >
                <template slot-scope="scope">
                  <span>
                    {{
                      scope.row.conditionWildcard
                        | keyText("CONDITION_WILDCARD")
                    }}
                  </span>
                </template>
              </el-table-column>

              <el-table-column
                width="200"
                label="管理"
                align="center"
                fixed="right"
              >
                <template slot-scope="scope">
                  <el-tooltip content="编辑" placement="top">
                    <el-button
                      type="button"
                      size="mini"
                      icon="el-icon-edit"
                      @click="editSearch(scope.row)"
                    >
                    </el-button>
                  </el-tooltip>
                  <el-tooltip content="删除" placement="top">
                    <el-button
                      size="mini"
                      icon="el-icon-delete"
                      @click="delSearch(scope.row)"
                    >
                    </el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </page-table>
          </div>
          <el-dialog
          :close-on-click-modal="false"
            :visible.sync="showSearchStatus"
            v-if="showSearchStatus"
            title="新增/修改流程查询信息:"
            width="40%"
            @close="fail"
          >
            <el-row>
              <el-col :span="24">
                <el-form
                  ref="form"
                  :model="formInfo"
                  :rules="rules"
                  label-width="100px"
                >
                  <el-form-item label="表名:" prop="tableName">
                    <el-select
                      v-model="formInfo.tableName"
                      placeholder="请选择表"
                      @change="typeChange"
                    >
                      <el-option
                        v-for="item in tableList"
                        :key="item.tableName"
                        :label="item.tableComment"
                        :value="item.tableName"
                      >
                        <span
                          style="float: left;margin-right:10px;font-weight: bold"
                        >
                          {{ item.tableName }}
                        </span>
                        <span style="float: right;">
                          {{ item.tableComment }}
                        </span>
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="字段名:" prop="fieldName">
                    <el-select
                      v-model="formInfo.fieldName"
                      placeholder="请选择字段"
                    >
                      <el-option
                        v-for="item in fieldList"
                        :key="item.columnName"
                        :label="item.columnComment"
                        :value="item.columnName"
                      >
                        <span
                          style="float: left;margin-right:10px;font-weight: bold"
                        >
                          {{ item.columnName }}
                        </span>
                        <span style="float: right;">
                          {{ item.columnComment }}
                        </span>
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="类型:" prop="conditionType">
                    <el-select
                      v-model="formInfo.conditionType"
                      placeholder="请选择类型"
                    >
                      <el-option
                        v-for="item in searchTypes"
                        :key="item.keyword"
                        :label="item.label"
                        :value="item.keyword"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="通配符:" prop="conditionWildcard">
                    <el-select
                      v-model="formInfo.conditionWildcard"
                      placeholder="请选择通配符"
                    >
                      <el-option
                        v-for="item in wildCard"
                        :key="item.keyword"
                        :label="item.label"
                        :value="item.keyword"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="查询项名称:" prop="conditionName">
                    <el-input
                      v-model="formInfo.conditionName"
                      placeholder="请输入查询项名称"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="数据来源:" prop="sourceType">
                    <el-select
                      v-model="formInfo.sourceType"
                      placeholder="请选择通配符"
                    >
                      <el-option
                        v-for="item in sourceTypes"
                        :key="item.keyword"
                        :label="item.label"
                        :value="item.keyword"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="数据源:" prop="conditionData">
                    <el-input
                      v-model="formInfo.conditionData"
                      type="textarea"
                      :rows="4"
                      placeholder="请输入数据源"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="占位符:" prop="placeholder">
                    <el-input
                      v-model="formInfo.placeholder"
                      placeholder="请输入占位符"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="排序" prop="sort">
                    <el-input-number
                      v-model="formInfo.sort"
                      :min="0"
                      label="描述文字"
                      step-strictly
                    ></el-input-number>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
            <div slot="footer">
              <el-button type="primary" @click="saveSearch">
                保存
              </el-button>
              <el-button @click="fail">
                取消
              </el-button>
            </div>
          </el-dialog>
        </el-col>
      </el-card>
    </el-row>
  </section>
</template>
<script>
import _ from "lodash";

export default {
  created() {
    this.getPageData();
    this.getTable();
  },
  data() {
    return {
      formInfo: {
        tableName: "",
        fieldName: "",
        conditionName: "",
        conditionData: "",
        conditionType: "",
        conditionWildcard: "",
        sourceType: "",
        placeholder: "",
        sort: ""
      },
      rules: {
        tableName: [
          { required: true, message: "请输入表名称", trigger: "blur" }
        ],
        fieldName: [
          { required: true, message: "请输入字段名称", trigger: "blur" }
        ],
        conditionName: [
          { required: true, message: "请输入名称", trigger: "blur" }
        ],
        conditionType: [
          { required: true, message: "请输入类型", trigger: "blur" }
        ],
        conditionWildcard: [
          { required: true, message: "请选择通配符", trigger: "blur" }
        ],
        sort: [{ required: true, message: "请输入排序", trigger: "blur" }]
      },
      showSearchStatus: false,
      loading: false,
      pageData: {},
      tableList: {},
      fieldList: {},
      searchDto: { tableName: "", pageIndex: "", pageSize: 10 },
      searchTypes: this.getDictionary("INSTANCE_SEARCH"),
      wildCard: this.getDictionary("CONDITION_WILDCARD"),
      sourceTypes: this.getDictionary("SOURCE_TYPE")
    };
  },
  methods: {
    //表修改重新获取字段
    typeChange(val) {
      this.formInfo.fieldName = "";
      this.getField(val);
    },
    //获取字段列表
    getField(val) {
      console.log(val);
      let tem = { tableName: val };
      this.API.getWorkflowTableFieldList(tem).then(ret => {
        this.fieldList = ret.data;
      });
    },
    //修改
    newSearch() {
      this.showSearchStatus = true;
    },
    //获取所有表
    getTable() {
      this.API.getWorkflowTableList().then(ret => {
        this.tableList = ret.data;
      });
    },
    //分页
    getPageData(val) {
      let tem = Object.assign(this.searchDto, val);
      this.API.getWorkflowSearchPageList(tem).then(ret => {
        this.pageData = ret.data;
        console.log("pageData", ret.data);
      });
    },
    clear() {
      this.searchDto = { tableName: "", pageIndex: "", pageSize: 10 };
      this.getPageData(1);
    },
    fail() {
      this.showSearchStatus = false;
      this.formInfo = {
        tableName: "",
        fieldName: "",
        conditionName: "",
        conditionData: "",
        conditionType: "",
        conditionWildcard: "",
        sourceType: "",
        placeholder: "",
        sort: ""
      };
    },
    saveSearch() {
      let tem = { body: this.formInfo };
      // console.log(tem);
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.API.addOrUpdateWorkflowSearch(tem).then(ret => {
            this.$message({
              message: "操作成功",
              type: "success"
            });
            this.getPageData();
            this.showSearchStatus = false;
          });
        } else {
          return false;
        }
      });
    },
    editSearch(row) {
      this.formInfo = _.clone(row);
      this.getField(this.formInfo.tableName);
      this.showSearchStatus = true;
    },
    delSearch(row) {
      this.$confirm("确认删除当前数据?", "提示", {})
        .then(() => {
          let tem = {
            id: row.id
          };
          this.API.deleteWorkflowSearchById(tem).then(res => {
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.getPageData();
          });
        })
        .catch(() => {});
    }
  }
};
</script>
<style scoped></style>
